<%--
  Created by IntelliJ IDEA.
  User: Mr.G
  Date: 2019/1/22
  Time: 17:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>财务统计</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
    <script src="${path}/assets/js/echarts.common.min.js"></script>
</head>
<body>

<div class="layui-container">
    <form action="" style="padding: 10px;">
        <div class="layui-inline">
            <label class="layui-form-label">支付类型:</label>
            <div  class="layui-input-inline">
                <select name="moneyType" id="moneyType" class="layui-select">
                    <option value="全部">全部</option>
                    <option value="现金">现金</option>
                    <option value="会员卡">会员卡</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">范围选择:</label>
            <div class="layui-input-inline">
                <input type="text" name="datetime1" id="datetime1"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="">到</label>
            <div class="layui-input-inline">
                <input type="text" name="datetime2" id="datetime2"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" onclick="cha();return false" class="layui-btn">查询</button>
        </div>
    </form>
</div>
<div id="main" style="width:100%;height:400px;"></div>

<%--加载时间控件--%>
<script type="text/javascript">
    layui.use(['table','form','laydate'],function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#datetime1' //指定元素
        });
        laydate.render({
            elem: '#datetime2' //指定元素
        });

        setTimeout(function () {
            layui.form.render()
        },300)
    })
</script>
<%--初始化统计图--%>
<script type="text/javascript">


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //设置等待图
    myChart.showLoading();

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '成交金额统计'
        },
        tooltip: {},
        legend: {
            data:['成交金额']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '成交金额',
            type: 'bar',
            data: []
        }]
    };

    myChart.setOption(option);
    var datatime1 =  $("[name='datetime1']").val();
    var datatime2 =   $("[name='datetime2']").val();

    $.post('/Echart/caiwuEchart',{"datatime1":datatime1,"datatime2":datatime2},function (data) {
        var xq = data.dataList;
        var xqsum = data.moneyList ;
        console.log(xq);
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: xq,

            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: xqsum,
                type: 'line'
            }]
        });
        //隐藏等待图
        myChart.hideLoading();
    }) ;


</script>

<script type="text/javascript">

    function cha() {
        var datatime1 = $("[name='datetime1']").val();
        var datatime2 = $("[name='datetime2']").val();
        var moneyType = $("#moneyType  option:selected").val();

        $.post('/Echart/caiwuEchart', {"datatime1": datatime1, "datatime2": datatime2,"moneyType":moneyType}, function (data) {
            var xq = data.dataList;
            var xqsum = data.moneyList;
            console.log(xq);
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: xq,

                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: xqsum,
                    type: 'line'
                }]
            });
            //隐藏等待图
            myChart.hideLoading();

        })
    }
</script>



</body>
</html>
